<template>
	<view class="pug-sharehb-box" v-if="isShow" @click="handleClose">
		
		<u-loading-icon :show="showloading"></u-loading-icon>
		<view class="pug-share-image" v-if="path">
			<!-- 把生成的海报赋值到这里 -->
			<image :src="path" mode="widthFix"></image>
			<view style="display: flex;margin-top: 20rpx;justify-content: center;">
				<view style="margin-right: 20rpx;">
					<u-button type="info" :plain="true" @click="handleClose" text="点击关闭"></u-button>
				</view>
				<view style="margin-right: 20rpx;">
					<u-button type="warning" @click="shareWeixin" open-type="share" text="分享到朋友圈"></u-button>
				</view>
				<view>
					<u-button type="primary" @click="saveImage" text="导出海报"></u-button>
				</view>
			</view>
			
		</view>
		
		
		<!-- 海报 -->
		<l-painter ref="painter" isCanvasToTempFilePath @success="handleSuccess($event)" custom-style="position: fixed;display:none;"
			css="width: 750rpx; padding-bottom: 40rpx;border-radius:8px;border:1px solid #ccc;background: linear-gradient(#fafafa 0%, #fafafa 100%);">
			
			<!-- 海报的用户部分 -->
			<l-painter-view css="text-align:center;">
				<!-- 头像 -->
				<l-painter-image :src="painterItem.avatar"
					css=" margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;" />
				<!-- 名字 -->
				<l-painter-text :text="painterItem.nickname"
					css="display: block; padding-bottom: 10rpx; color: #333; font-size: 32rpx; fontWeight: bold" />
				<!-- 个性签名 -->
				<l-painter-text text="美好的事情即将发生" css="color: #333; font-size: 24rpx" />
			</l-painter-view>
			
			
			<l-painter-view
				css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx;">
				<l-painter-image
				 :src="painterItem.image"
					css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
				<l-painter-view v-if="painterItem.realprice > 0"
					css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
					<l-painter-text text="￥" css="vertical-align: bottom" />
					<l-painter-text :text="painterItem.realprice" css="vertical-align: bottom; font-size: 58rpx" />
					<l-painter-text :text="'￥'+painterItem.price"
						css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
				</l-painter-view>
				<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
					<l-painter-text :text="painterItem.categoryname" css="color: #212121; background: #ffb400;" />
					<l-painter-text v-for="(item,index) in painterItem.tips" :key="index" :text="item" css="margin-left: 16rpx; background: #fff4d9" />
				</l-painter-view>
				
				<l-painter-view css="margin-top: 30rpx">
					<l-painter-text
						css="line-clamp: 2; color: #333333; line-height: 1.6em; font-size: 32rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
						:text="painterItem.title"></l-painter-text>
						<!-- 二维码 -->
					<l-painter-qrcode css="width: 128rpx; height: 128rpx;" :text="painterItem.qrcode"></l-painter-qrcode>
				</l-painter-view>
			</l-painter-view>
			
		</l-painter>
	</view>
</template>

<script>
	export default {
		name:"pug-share",
		props: {
			painterItem: {
				type: Object,
				default: {}
			},
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				path:"",
				showloading: true
			}
		},
		methods: {
			handleSuccess(ev){
				this.path = ev;
				this.showloading = false
			},
			// 点击导出图片
			saveImage(){
				// 将海报的canvas画布生成图片
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
					// uni.saveImageToPhotosAlbum 如果是app就会自动把生成的海报保存到用户手机的相册中
				    uni.saveImageToPhotosAlbum({
				        filePath: res.tempFilePath,
				        success() {
				            uni.showToast({
				            	title:"保存成功"
				            })
				        }
				    });
				  },
				});
			},
			handleClose(){
				this.$emit("close")
			},
			// 分享到朋友圈
			shareWeixin(){
				let that = this
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: that.painterItem.qrcode,
					title: that.painterItem.title,
					imageUrl: that.path,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pug-sharehb-box{
		background: rgba(0,0,0,0.2);
		position: fixed;
		right: 0;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 500;
	}
.pug-share-image {
		position: fixed;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -70%);
		height: 800rpx;
		width: 80%;
		border-radius: 40rpx;
		background: #fff;
		z-index: 20070;
		image {
			width: 100%;
		}
	}

	.pug-share-box {
		padding: 20rpx;

		.pug-share-items {
			display: flex;
			padding: 0rpx 20rpx 40rpx;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.iconfont {
					font-size: 36px;
					padding-bottom: 20rpx;
				}

				.txt {
					font-size: 24rpx;
					font-weight: 800;
					color: #666;
				}
			}
		}
	}
</style>